<template>
	<view class="content" :style="{'padding-top':top+'px','min-height':windowheight+'px'}">
		<Navbar title="开盲盒" bgColor="#da708b" :backIcon="false" style="color: #ffffff;z-index: 1;"></Navbar>
		<view class="blind_box_top">
			<view class="blindb_gz" @tap.stop="open_popup">活动规则</view>
		</view>
		<view class="blind_box_con">
			<button class="blindbc_btn" plain="true" @click="blindout"></button>
		</view>
		<!--弹出层 -->
		<uni-popup type="message" ref="game_rule" background-color="#fff">
			<view class="gamerule_msg">
				<view class="gamemsg_tit">AI笑开盲盒规则</view>
				<view class="gamemsg_con">
					<ol>
						<li>每周可开启盲盒1次，奖品随机呈现；</li>
						<li>目前奖品包括积分和优惠券两种，后续会增加奖品种类；</li>
						<li>中奖后的奖品会自动存入客户相应账户，客户可到“我的积分”或“我的优惠”中查看。</li>
					</ol>
				</view>
			</view>
		</uni-popup>
		<uni-popup type="center" ref="prize" mask-background-color="rgba(0,0,0,0.1)">
			<view class="prize">
				<view class="congratulations">恭喜你活得了：</view>
				<view class="prizename">{{prizename}}</view>
				<image
					src="http://zzqjt-test.oss-cn-hangzhou.aliyuncs.com/templates/client/res/2db308464791446c8aef301881555746-blindBoxPopUpWindow.png">
				</image>
				<view class="button">
					<button size="mini" style="margin-right: 30rpx;color: #5339d7;" @click="back">返回首页</button>
					<button size="mini" style="color:#fff ;background-color: #fe7281;" @click="determine">确定</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="确认" title="通知" :content="text"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>
<script setup>
	import { ref,onMounted } from 'vue'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	const baseUrl = getApp().globalData.baseUrl
	const title=ref('Hello')
	const windowheight=ref()
	const platform = ref()
	const statusBar = ref()
	const customBar = ref()
	const top = ref()
	const client_no = ref(JSON.parse(uni.getStorageSync("user_info")).client_no)
	const game_rule = ref(null)
	const prize = ref(null)
	const lastBlindDay = ref('2023-09-30')
	//const btnEnable=ref(true)
	const prizename = ref()
	const msgType = ref('success')
	const alertDialog = ref()
	const text = ref("")
	const back = () => {
		uni.switchTab({
			url: "/pages/my/my"
		})
	}
	const determine = () => {
		prize.value.close()
	}
	const blindout = () => {
		let td = new Date()
	
		//从后端获取中奖情况
		uni.request({
			url: getApp().globalData.baseUrl + "/goods/prize",
			method: "GET",
			header: {
				'content-type': 'application/json',
				'Access-Control-Allow-Origin': "*",
				'Authorization': uni.getStorageSync('token')
			},
			data: {
				clientNo: client_no.value
			},
			success: (res) => {
				console.log(res)
				if (res.data.code === 300) {
					console.log(1)
					dialogToggle('error')
					text.value="开启盲盒冷却时间未过"+"还剩"+res.data.value+"天"
				} else {
					prize.value.open("center")
					prizename.value = res.data.value.goodsName
				}
	
			},
			fail: (err) => {
				console.log(err)
			}
		})
	}
	const open_popup = () => {
		game_rule.value.open("center")
	}
	const dialogToggle = (type) => {
		msgType.value = type
		alertDialog.value.open()
	}
	const getColumnHeight=()=>{
		uni.getSystemInfo({
			success(res) {
				console.log(res)
				platform.value = res.platform
				windowheight.value=res.screenHeight
				// #ifdef MP-WEIXIN
				statusBar.value = res.statusBarHeight
				const custom = wx.getMenuButtonBoundingClientRect()
				customBar.value = custom.bottom + custom.top - res.statusBarHeight
				// #endif
				// #ifdef APP-PLUS
				statusBar.value = res.statusBarHeight
				customBar.value = res.statusBarHeight + 45
				// 这里是在安卓手机上加上 3 像素（当时好像是在安卓水滴屏上，系统导航栏高度较低才加上去的，大家可以真机自己调试一下）
				if (res.platform == "android") {
					statusBar.value += 3
					customBar.value += 3
				}
				// #endif
			}
		})
		top.value = customBar.value
		windowheight.value=windowheight.value-top.value
		//console.log(statusBar.value, customBar.value, top.value,windowheight.value)
	}
	onShow(()=>{
		const now = new Date().getTime()
		if (!uni.getStorageSync('token') || now > uni.getStorageSync('expireTime')) {
			uni.reLaunch({
				url: "/pages/login/login"
			})
		}
	})
	onMounted(()=>{
		getColumnHeight()
	})
</script>
<style lang="less" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-image: linear-gradient(to bottom,#d95e7d,#ffffff);
	}
	.blind_box_top {
		background: url("http://zzqjt-test.oss-cn-hangzhou.aliyuncs.com/templates/client/res/fed5902b7d6b4f1cbe8452edbc8cb136-blindBoxBackground3.png");
		background-position: top center;
		background-repeat: no-repeat;
		background-size: cover;
		height: 532rpx;
		width: 100%;
	}
	
	.blindb_gz {
		text-align: right;
		padding-right: 30rpx;
		padding-top: 20rpx;
		color: #fff;
		font-size: 30rpx;
	}
	
	.blind_box_con {
		display: flex;
		justify-content: center;
		margin-top: 20rpx;
	}
	
	.blind_box_con image {
		width: 432rpx;
		height: 400rpx;
	}
	
	.blindbc_btn {
		width: 432rpx;
		height: 400rpx;
		background: url("http://zzqjt-test.oss-cn-hangzhou.aliyuncs.com/templates/client/res/1c7d047c85544a77b93e4171ea35bf73-blindBoxButton.png");
		display: inline-block;
		background-size: cover;
		border: none;
		outline: none;
	}
	
	.gamerule_msg {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 16rpx;
		line-height: 50rpx;
	}
	
	.prize {
		width: 600rpx;
		height: 800rpx;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		position: relative;
	
		image {
			width: 100%;
			height: 100%;
		}
	
		.congratulations {
			position: absolute;
			top: 150rpx;
			left: 100rpx;
		}
	
		.prizename {
			position: absolute;
			top: 40%;
			left: 50%;
			transform: translate(-50%);
		}
	
		.button {
			position: absolute;
			bottom: 60rpx;
			width: 530rpx;
			height: 120rpx;
			border: 0px !important;
	
			//background-color: aqua;
			button {
				width: 250rpx;
				height: 120rpx;
				line-height: 120rpx;
				border-radius: 40rpx;
				font-size: 35rpx;
				border: 0px !important;
			}
		}
	}
</style>